import { createElements, define, itag } from "../itag/index.js";
import type { CustomResField } from "./ResponseOption.js";
import * as styles from "./styles.js";

export class CustomFieldElement extends HTMLElement {
    readonly #elms = createElements({
        name: "span",
        value: "span",
    });

    #option: CustomResField | null = null;

    constructor() {
        super();
        itag`
${this} .${styles.field}
    span  .${styles.kind} : custom
    ${this.#elms.name} .${styles.name}
    ${this.#elms.value} .${styles.value} 
`;
    }

    get option() {
        return this.#option;
    }

    set option(opt: CustomResField | null) {
        this.#option = opt;
        if (opt === null) {
            this.#elms.value.textContent = "";
            return;
        }
        this.#elms.name.textContent = opt.name;
        this.#elms.value.textContent = opt.desc;
    }
}

define("custom-field", CustomFieldElement);
